<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/10/18
  Time: 8:13
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link type="text/css" rel="stylesheet" media="all" href="../styles/global.css" />
    <link type="text/css" rel="stylesheet" media="all" href="../styles/global_color.css" />
    <script language="javascript" type="text/javascript">
        //写入下拉框中的年份和月份
        function initialYearAndMonth() {
            //写入最近3年
            var yearObj = document.getElementById("selYears");
            var year = (new Date()).getFullYear();
            for (var i = 0; i <= 2; i++) {
                var opObj = new Option(year - i, year - i);
                yearObj.options[i] = opObj;
            }
            //写入 12 月
            var monthObj = document.getElementById("selMonths");
            var opObj = new Option("全部", "全部");
            monthObj.options[0] = opObj;
            for (var i = 1; i <= 12; i++) {
                var opObj = new Option(i, i);
                monthObj.options[i] = opObj;
            }
        }
    </script>
</head>
<body onload="initialYearAndMonth();">
<!--Logo区域开始-->
<div id="header">
    <img src="../images/logo.png" alt="logo" class="left"/>
    <a href="#">[退出]</a>
</div>
<!--Logo区域结束-->
<!--导航区域开始-->
<div id="navi">
    <c:import url="../showModule.jsp"/>
</div>
<!--导航区域结束-->
<!--主要区域开始-->
<div id="main">
    <form action="" method="">
        <!--查询-->
        <div class="search_add">
            <div>身份证：<input type="text"  value="230101111111111111" class="text_search" /></div>
            <div>账务账号：<input type="text" value="admin1" class="width100 text_search" /></div>
            <div>姓名：<input type="text" value="张三" class="width70 text_search" /></div>
            <div>
                <select class="select_search" id="selYears">
                </select>
                年
                <select class="select_search" id="selMonths">
                </select>
                月
            </div>
            <div><input type="button" value="搜索" class="btn_search" /></div>
        </div>
        <!--数据区域：用表格展示数据-->
        <div id="data">
            <table id="datalist">
                <tr>
                    <th class="width50">账单ID</th>
                    <th class="width70">姓名</th>
                    <th class="width150">身份证</th>
                    <th class="width150">账务账号</th>
                    <th>费用</th>
                    <th class="width100">月份</th>
                    <th class="width100">支付方式</th>
                    <th class="width100">支付状态</th>
                    <th class="width50"></th>
                </tr>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>230102197902137862</td>
                    <td>admin1</td>
                    <td>543.45</td>
                    <td>2012年8月</td>
                    <td></td>
                    <td>未支付</td>
                    <td><a href="bill_item.html" title="账单明细">明细</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>230102197901111111</td>
                    <td>admin2</td>
                    <td>843.00</td>
                    <td>2012年9月</td>
                    <td>现金</td>
                    <td>已支付</td>
                    <td><a href="bill_item.html" title="账单明细">明细</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>230111111111111111</td>
                    <td>admin3</td>
                    <td>12.00</td>
                    <td>2012年10月</td>
                    <td></td>
                    <td>未支付</td>
                    <td><a href="bill_item.html" title="账单明细">明细</a></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>张三</td>
                    <td>230102197902137862</td>
                    <td>admin1</td>
                    <td>543.45</td>
                    <td>2012年8月</td>
                    <td></td>
                    <td>未支付</td>
                    <td><a href="bill_item.html" title="账单明细">明细</a></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>李四</td>
                    <td>230102197901111111</td>
                    <td>admin2</td>
                    <td>843.00</td>
                    <td>2012年9月</td>
                    <td>现金</td>
                    <td>已支付</td>
                    <td><a href="bill_item.html" title="账单明细">明细</a></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>王五</td>
                    <td>230111111111111111</td>
                    <td>admin3</td>
                    <td>12.00</td>
                    <td>2012年10月</td>
                    <td></td>
                    <td>未支付</td>
                    <td><a href="bill_item.html" title="账单明细">明细</a></td>
                </tr>
            </table>

            <p>业务说明：<br />
                1、设计支付方式和支付状态，为用户自服务中的支付功能预留；<br />
                2、只查询近 3 年的账单，即当前年和前两年，如2013/2012/2011；<br />
                3、年和月的数据由 js 代码自动生成；<br />
                4、由数据库中的ｊｏｂ每月的月底定时计算账单数据。</p>
        </div>
        <!--分页-->
        <div id="pages">
            <a href="#">首页</a>
            <a href="#">上一页</a>
            <a href="#" class="current_page">1</a>
            <a href="#">2</a>
            <a href="#">3</a>
            <a href="#">4</a>
            <a href="#">5</a>
            <a href="#">下一页</a>
            <a href="#">末页</a>
        </div>
    </form>
</div>
<!--主要区域结束-->
<div id="footer">
    <p>[源自北美的技术，最优秀的师资，最真实的企业环境，最适用的实战项目]</p>
    <p>版权所有(C)云科技有限公司 </p>
</div>
</body>
</html>

